<template>
  <div class="block-right">
    <div style="margin-bottom: 10px; cursor: pointer" @click="addBlock">
      <a-icon type="plus" style="margin-right: 5px; color: #000000" />
      <span style="color: #000000">添加地块</span>
    </div>
    <blockGis ref="blockGisRef" class="block-gis" v-show="!detalis"></blockGis>
  </div>
</template>
<script>
import blockGis from "./modules/BlockGisModal.vue";
// import { mixinDevice } from '@/utils/mixin'
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { postAction, getAction, deleteAction } from "@/api/manage";
import { Icon } from "ant-design-vue";

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js",
});
export default {
  name: "BlockList",
  // mixins:[JeecgListMixin, mixinDevice],
  components: {
    blockGis,
    IconFont,
  },
  data() {
    return {
      blockList: [], //地块数据
      totalArea: 0,
      blockCount: 0,
      blockId: "",
      blockName: "",
      blockArea: 0,
      blockAreaReal: 0,
      blockindex: 0,
      visible: false,
      checkAll: false,
      checckboxShow: false,
      deleteArr: [], //要删除的数组 存入id
      blockHeight: document.documentElement.clientHeight + "px",
      blockVal: "",
      detalis: false,
      isShow: false,

      url: {
        // list: "/app/block/list",
        delete: "/app/block/delete",
        deleteBatch: "/app/block/deleteBatch",
      },
    };
  },
  created() {
    //获取地块数据
    this.getBlockList();
  },
  methods: {
    /**
     * 加载地块列表
     */
    getBlockList() {
      getAction("/app/block/list", {
        pageNo: 1,
        pageSize: 100,
      }).then((res) => {
        console.log("获取地块成功1：", res);
        let { code, message, result, success } = res;
        if (code == 200 && result) {
          this.blockList = result.records;
          if (this.blockList.length > 0) {
            // this.blockInfo = this.blockList[0];
            // this.blockName = this.blockInfo.name;
            let mj = 0;
            this.blockCount = this.blockList.length;
            for (let i in this.blockList) {
              let blockInfo = this.blockList[i];
              mj += parseFloat(blockInfo.area);
              this.blockList[i].checked = false;
            }
            this.totalArea = mj.toFixed(2);
            // this.getDeviceList()
          }
        }
      });
    },
    moveView(e, index) {
      this.detalis = false;
      this.$refs.blockGisRef.moveViewChild(e.zbxBh); // 调用子组件的方法
    },
    //搜索
    onSearch() {},

    //详情
    detalisClick(e, index) {
      this.detalis = true;
      this.blockindex = index;
      this.blockId = e.id;
      this.blockName = e.name;
      this.blockArea = e.area;
      this.blockAreaReal = e.areaReal;
    },

    //详情关闭
    detalisOff() {
      this.detalis = false;
    },
    //添加地块
    addBlock() {
      // this.$router.push({path:'./BlockForms',query: {list: this.blockList} });
      this.$router.push({ path: "./BlockForms" });
    },
    //编辑地块
    editBlock() {
      this.$router.push({
        path: "./BlockForms",
        query: this.blockList[this.blockindex],
      });
    },

    //左上角[删除地块] 按钮 点击
    deleteBlockClick() {
      this.checckboxShow = true;
    },
    //左下角[完成] 按钮 点击，关闭checkbox显示
    closeChekbox() {
      this.checckboxShow = false;
      this.checkAll = false;
      this.deleteArr = [];
      for (let i = 0; i < this.blockList.length; i++) {
        this.blockList[i].checked = false;
      }
    },
    //左下角[删除]  按钮 点击 显示多选删除弹窗
    showDelsModel() {
      if (this.deleteArr.length > 0) {
        this.visible = true;
      } else {
        document.getElementById("textContent").style.color = "red";
        setTimeout(function () {
          document.getElementById("textContent").style.color = "#999";
        }, 1000);
      }
    },
    //单选
    onChange(e, val, index) {
      if (e.target.checked === true) {
        let newItem = Object.assign(this.blockList[index], { checked: true });
        this.$set(this.blockList, index, newItem);
        this.deleteArr.push(val);
        let arrLength = this.deleteArr.length; //要删除的原数组长度
        if (this.blockList.length == arrLength) {
          this.checkAll = true;
        }
      } else {
        let arrLength = this.deleteArr.length; //要删除的原数组长度
        let newItem = Object.assign(this.blockList[index], { checked: false });
        this.$set(this.blockList, index, newItem);
        this.deleteArr.splice(this.deleteArr.indexOf(val), 1);
        if (this.deleteArr.length < arrLength) {
          this.checkAll = false;
        }
      }
      console.log(this.deleteArr);
      // console.log(this.blockList)
    },
    //全选
    onCheckAllChange(e) {
      Object.assign(this, {
        checkAll: e.target.checked,
      });
      if (e.target.checked === true) {
        this.deleteArr = []; //先清空
        for (let i in this.blockList) {
          let newItem = Object.assign(this.blockList[i], { checked: true });
          this.$set(this.blockList, i, newItem);
          this.deleteArr.push(this.blockList[i].id);
        }
      } else {
        for (let i in this.blockList) {
          let newItem = Object.assign(this.blockList[i], { checked: false });
          this.$set(this.blockList, i, newItem);
          this.deleteArr = [];
        }
      }
      console.log(this.deleteArr);
      //console.log(this.blockList)
    },
    //删除地块-单个
    deleteBlock() {
      var that = this;
      that.detalis = false;
      deleteAction(that.url.delete, { id: that.blockId }).then((res) => {
        if (res.success) {
          //重新计算分页问题
          that.$message.success(res.message);
          that.getBlockList();
          that.$refs.blockGisRef.getHistoryBlockList();
          that.blockindex = "";
          that.blockId = "";
        } else {
          that.$message.warning(res.message);
        }
      });
    },
    //删除地块-多个，弹窗确认删除，多选删除确认按钮
    batchDelBlock() {
      this.visible = false;
      this.checckboxShow = false;
      this.checkAll = false;
      console.log(this.deleteArr);
      var that = this;
      const ids = this.deleteArr.join(",");
      deleteAction(that.url.deleteBatch, { ids: ids })
        .then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.deleteArr = [];
            that.getBlockList();
            that.$refs.blockGisRef.getHistoryBlockList();
          } else {
            that.$message.warning(res.message);
          }
        })
        .finally(() => {
          that.loading = false;
        });
    },
  },
};
</script>
<style scoped>
.block-content {
  display: flex;
  background: #ffffff;
}
.block-list {
  position: relative;
  padding: 16px 0px;
  width: 290px;
  border-right: 1px solid #e8e8e8;
}
.block-top {
  padding: 0px 16px;
  display: flex;
  align-items: center;
}
.infoSetting-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 70px;
  font-size: 14px;
}
.partial__block {
  flex: 1;
  padding: 16px 0px;
  text-align: left;
}
.block-title {
  font-size: 14px;
}
.block-value {
  font-size: 20px;
  color: #333;
  font-weight: bold;
}
.block-mid {
  padding: 0px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.block-bottom {
  padding: 0px 16px;
  height: 350px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.block-bottom-delete {
  position: relative;
  bottom: 0;
}
.block-bottom-border {
  width: 100%;
  height: 20px;
  border-radius: 3px;
  background-color: #b4b4b4;
}
.block-bottom-delete-checkbox {
  padding: 0px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.block-right {
  width: 100%;
}
.block-detalis-top {
  height: 64px;
  padding: 0 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(238, 238, 238);
  background: rgb(255, 255, 255);
  box-shadow: rgb(0 0 0 / 10%) 0px 2px 8px 0px;
}
.block-detalis-top span:first-child {
  font-size: 20px;
  font-weight: bold;
}
.block-detalis-top span:last-child {
  font-size: 16px;
  cursor: pointer;
}
.block-detalis-mid {
  padding: 20px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.block-detalis-name {
  font-size: 18px;
  font-weight: 600;
}
.block-detalis-bottom {
  padding: 0px 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.block-detalis-bottom-info {
  font-size: 14px;
  flex: 1 1 0%;
}
.block-detalis-bottom-tit {
  color: rgb(153, 153, 153);
}
.block-detalis-bottom-val {
  font-weight: bold;
  margin-left: 30px;
}
.textContent {
  font-size: 12px;
  color: #999;
  padding: 5px 16px;
}
.textClass {
  color: red;
}
.block-gis {
  position: relative;
}
</style>
<style>
.block-content .ant-list-vertical .ant-list-item-meta-title {
  font-size: 14px;
  font-weight: bold;
}
.block-content .ant-list-vertical .ant-list-item-meta {
  margin-bottom: 0px;
}
.block-content .ant-list-vertical .ant-list-item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.overlay-class .ant-tooltip-inner {
  background: #ffffff !important ;
}

.block-content .ant-list-vertical .ant-list-item {
  cursor: pointer; /* 鼠标样式设置为小手 */
}
</style>
